@use '../core' as *;

.contentViewport {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    @media (min-width: $breakpoint-docs-nav-medium) {
        flex-direction: row;
    }

    &.noLeftMenu .docPage {
        width: 100%;
    }

    @media (min-width: $breakpoint-docs-nav-large) {
        &.noLeftMenu .docPage {
            width: var(--layout-width-9-12);
        }
    }

    @media (min-width: $breakpoint-docs-nav-extra-large) {
        &.noLeftMenu .docPage {
            width: var(--layout-width-6-12);
            margin-left: calc(var(--layout-width-3-12) + var(--layout-gap));
        }
    }
}

.pageSections article {
    > h2 {
        margin-top: $spacing-size-12;
    }

    > h3,
    > h4 {
        margin-top: $spacing-size-8;
    }

    p,
    > ul,
    > ol,
    > table,
    > pre {
        font-size: var(--text-fs-base);
        line-height: var(--text-lh-xs);
    }
}

%enterprise-icon {
    display: inline-block;
    background-image: url('../../images/enterprise.svg');
    text-indent: -10000px;
    background-position-y: center;
    background-repeat: no-repeat;
    content: 'e';
}

.docPage {
    flex: 1 1 0px;
    width: 100%;
    min-width: 0px;
    padding-top: $spacing-size-4;
    padding-bottom: $spacing-size-16;

    @media screen and (max-width: $breakpoint-docs-nav-large) {
        border: none;
    }
    @media screen and (max-width: $breakpoint-docs-nav-medium) {
        padding-top: 0;
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        width: var(--layout-width-9-12);
        padding-top: $spacing-size-10;
        padding-right: $spacing-size-3;
    }

    @media screen and (min-width: $breakpoint-docs-nav-large) {
        width: var(--layout-width-7-12);
        max-width: var(--layout-width-7-12);
        padding-right: 0;
    }

    :global(h1),
    :global(h2),
    :global(h3),
    :global(h4),
    :global(h5),
    :global(h6) {
        :global(#{$selector-darkmode}) & {
            color: var(--color-fg-primary);
        }

        &:hover :global(.docs-header-icon) {
            opacity: 0.5;
        }
    }

    :global(.docs-header-icon) {
        position: relative;
        padding-left: 0;
        margin-left: $spacing-size-2;
        font-size: inherit;
        opacity: 0;
        transition: opacity 0.33s ease-in-out;

        &:hover {
            opacity: 1 !important;
        }

        :global(svg) {
            position: relative;
            width: 0.85em;
            height: 0.85em;
            top: -0.1em;
            visibility: visible;
            fill: var(--color-link);
        }
    }

    :global(a) {
    }

    :global(#{$selector-darkmode}) & {
        :global(a) {
            color: var(--color-brand-300);
        }

        :global(a):hover {
            color: var(--color-fg-primary);
            text-decoration-color: var(--color-brand-300);
        }
    }

    enterprise-icon::after {
        @extend %enterprise-icon;

        width: 1rem;
        margin-left: 0.25rem;
    }

    :global(.nav-link) {
        p {
            margin: 0;
        }
    }

    ul li > p {
        margin-bottom: 0.25rem;
    }

    code {
        font-size: 0.8em;
    }
}

// Align two column markdown tables
.pageSections > :global(article) > :global(table) {
    table-layout: fixed;
}

// Hack to target "intro" section of docs page
.pageSections > :global(article) > :global(p:first-child) {
    font-size: var(--text-fs-xl);
    margin-bottom: $spacing-size-8;
    color: color-mix(in srgb, var(--color-fg-secondary), var(--color-bg-primary) 20%);
    line-height: var(--text-lh-sm);

    :global(code) {
        font-size: 0.8em;
    }
}

// Hack to target markdown images and not images within components
.pageSections > :global(article) > :global(div) *:not([class]) :global(img) {
    max-width: 100%;
}

.sideMenu {
    padding-top: $spacing-size-8 + $spacing-size-1;
}
